<form name="addCategoryForm" class="ang-form" ng-controller="CategoriesAddFormCtrl as categoryAddFormCtrl"
      ng-submit="categoryAddFormCtrl.submitForm()" novalidate>


    <div class="row my-row-standard">
        <div class="col-xs-3">
            <a href="#/categories" class="btn btn-block btn-lg btn-default">Back to categories</a>
        </div>
        <div class="col-xs-6"></div>
        <div class="col-xs-3">
            <button type="submit" class="btn btn-block btn-lg btn-success" ng-disabled="addCategoryForm.$invalid"
                    ng-class="{disabled:addCategoryForm.$invalid}">
                Add category
            </button>
        </div>
    </div>

    <div class="row double-top-margin" ng-show="categoryAddFormCtrl.isSuccessMsgVisible">
        <div class="col-xs-12">
            <blockquote>
                <p>New category successfully added</p>
            </blockquote>
        </div>
    </div>

    <div class="row my-row-standard">
        <div class="col-xs-6">
            <h4 class="demo-panel-title">Parent category:</h4>
            <category-input ng-model="categoryAddFormCtrl.category.parent.id"
                            categories-data="categories"></category-input>
        </div>
        <div class="form-group hidden">
            <input type="text" value="" name="parentCategoryId" placeholder="Enter thumbnail url"
                   class="form-control my-form-control" title="dasda"
                   ng-model="categoryAddFormCtrl.category.parent.id" required hidden>
        </div>
        <div class="col-xs-6">
            <h4 class="demo-panel-title">Name:</h4>

            <div class="form-group" ng-class="{
                'has-success': addCategoryForm.categoryName.$valid,
                'has-error': addCategoryForm.categoryName.$invalid && addCategoryForm.categoryName.$dirty}">

                <input type="text" value="" name="categoryName" placeholder="Enter name"
                       class="form-control my-form-control" ng-model="categoryAddFormCtrl.category.name"
                       ng-minlength="3" required>
                <span class="input-icon fui-check-inverted" ng-show="addCategoryForm.categoryName.$valid"></span>
            </div>
        </div>
    </div>

    <hr/>

</form>